import React, { PureComponent, Fragment } from 'react';
import {
  Table,
  Divider,
  Card,
  Pagination,
  Button,
  Row,
  Popconfirm,
  message
} from 'antd';
import { connect } from 'dva';
import styles from './style.less';
import AddEdit from './components/AddEdit';
import AssignPermission from './components/AssignPermission';

/**
 * 角色管理
 */
@connect(({ role ,loading}) => ({
  role,loading: loading.effects['role/queryRole']
}))
class Role extends PureComponent {

  //挂载-初始化
  componentWillMount() {
//    this.mount =true;
    //if(this.mount = true){
      const { dispatch } = this.props;
      dispatch({
        type: 'role/queryRole',
        payload: { currentPage: 1 }
      })
    //}

  }

  componentWillUnmount() {
    this.mount = false;
  }

  //页码跳转
  getChangePage = (page) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'role/queryRole',
      payload: { currentPage: page }
    })
  }

  //保存角色
  saveRole = (values) => {
    console.log(values)
    const { dispatch } = this.props;
    dispatch({
      type: 'role/saveRole',
      payload: { role: values }
    })
  }

  //删除角色
  deleteRole = (id) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'role/deleteRole',
      payload: { id: id }
    })
    message.success('删除成功');
  }

  getPermissionByRoleId = (id)=> {
    //console.log(id);
    const {dispatch} = this.props;
    dispatch({
      type: 'role/getPermissionByRoleId',
      payload:{id:id}
   })
  }

  render() {
    const { data, page, pageSize, total ,permissions} = this.props.role;
    const columns = [
      {
        title: 'id',
        dataIndex: 'id'
      },
      {
        title: '角色',
        dataIndex: 'name',

      }, {
        title: '操作',
        key: 'operation',
        render: (record) => {
          return (
            <div>
              <AssignPermission permissions={permissions} record={record}>
                <Button onClick={() => this.getPermissionByRoleId(record.id)} type="primary" size="small" style={{ 'marginRight': 15 + 'px' }}>分配权限</Button>
              </AssignPermission>

              <AddEdit record={record} onSave={this.saveRole}>
                <a>编辑</a>
              </AddEdit>
              <span className={styles.editAddDelete}>|</span>
              <Popconfirm title="你确定要删除吗？" onConfirm={() => this.deleteRole(record.id)} okText="确定" cancelText="取消">
                <a>删除</a>
              </Popconfirm>
            </div>
          )
        }
      }
    ];
    return (
      <Fragment>
        <Card>
          <Row>
            <AddEdit record={{}} onSave={this.saveRole}>
              <Button type="primary" icon="plus">新建</Button>
            </AddEdit>
          </Row>
          <br></br>
          <Row>
            <Table loading={this.props.loading} rowKey={(record) => (record.id)} dataSource={data} columns={columns} pagination={false} />
            <Pagination className="ant-table-pagination" current={page} pageSize={pageSize} total={total} onChange={this.getChangePage} ></Pagination>
         </Row>
        </Card>
      </Fragment>
    )
  }

}

export default Role;
